<template>
	<Search />

	<div class="hu-wai">
		<!-- 活动预告 -->

		<div class="title">活动预告</div>
		<div class="preview-box">
			<div class="preview-item" v-for="(i, index) in previewList" :key="index">
				<div class="topic">
					<!-- <p class="topic-name">{{ i.name }}</p> -->
					<p class="topic-time">{{ i.time }}</p>
				</div>
				<div class="content">
					<p>{{ i.desc }}</p>
					<p class="addr">{{ i.addr }}</p>
				</div>
			</div>
		</div>
		<!-- 分页 -->
		<div class="footer">
			<el-button>上一页</el-button>
			<span>1/5</span>
			<el-button>下一页</el-button>
		</div>

		<!-- 活动照片 -->
		<div class="title">活动照片</div>
		<div class="box-list">
			<div class="box" v-for="(item, index) in list" :key="index">
				<el-image class="cover" :src="item.img" fit="cover" />
				<span>{{ item.name }}</span>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="MinSu">
import Search from "./Search.vue";

const list = [
	{ name: "国际文化交流活动", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/1.jpg" },
	{ name: "舞龙", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/2.JPG" },
	{ name: "荆竹村晚", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/3.jpg" },
	{ name: "国学实践", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/4.png" },

	{ name: "农事研学", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/5.JPG" },
	{ name: "文旅论坛", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/6.png" },
	{ name: "蜡染", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/7.png" },

	{ name: "茶艺游学", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/8.jpg" },
	{ name: "哈雷机车音乐文化节", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/9.jpg" },
	{ name: "归原·刨猪家宴", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/10.png" },
	{ name: "汉服", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/11.jpg" },

	{ name: "年猪节", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/12.JPG" },
	{ name: "农事研学", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/13.png" },
	{ name: "皮影拾趣", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/14.png" },
	{ name: "学术研讨会", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/minsuwenhuahuodong/15.jpg" }
];

// 活动预告
const previewList = [
	// { name: "春韵雅集", time: "(4-6月)", desc: "荆竹村晚", addr: "地点：仙女山街道荆竹村" },
	// { name: "仲夏闲趣", time: "(8月)", desc: "创客大赛", addr: "地点：仙女山街道荆竹村创客广场" },
	// { name: "硕实秋意", time: "(8月)", desc: "蜂疗大会", addr: "地点：仙女山街道荆竹村" },
	// { name: "雪境山趣", time: "(12-2月)", desc: "露营音乐节", addr: "地点：仙女山" },
	{ name: "硕实秋意", time: "(2023年4月)", desc: "著名书法家苏士澍“茶”文化大型书法活动及讲座", addr: "地点：白马山" },
	{ name: "雪境山趣", time: "(2023年5-8月)", desc: "“仙山为盟.白马为誓”恋爱季，单身青年联谊交友活动暨仙女山白马山婚拍活动", addr: "地点：白马山" },
	{ name: "硕实秋意", time: "(2023年6月)", desc: "“爱尚武隆·沐野消费季”消费促进活动暨第二届“山水原乡”美食文化节", addr: "地点：武隆区" },
	{ name: "雪境山趣", time: "(2023年7月)", desc: "亚欧青少年自然探索行动暨中外光明小记者世界自然遗产武隆采访活动", addr: "地点：武隆区" },
	{ name: "雪境山趣", time: "(2023年7月)", desc: "荆竹村晚", addr: "地点：仙女山街道荆竹村" },
	{ name: "雪境山趣", time: "(2023年8月)", desc: "荆竹村晚", addr: "地点：仙女山街道荆竹村" },
	{ name: "雪境山趣", time: "(2023年8月)", desc: "创客大赛", addr: "地点：仙女山街道荆竹村创客广场" },
	{ name: "雪境山趣", time: "(2023年8月)", desc: "蜂疗大会", addr: "地点：仙女山街道荆竹村" },
	{ name: "雪境山趣", time: "(2023年8月)", desc: "露营音乐节", addr: "地点：仙女山" },
	{ name: "雪境山趣", time: "(2023年8月)", desc: "第三届高山水果采摘季", addr: "地点：仙女山街道荆竹村杨柳组" }

	// { name: "雪境山趣", time: "(2023年7月)", desc: "啤酒节", addr: "地点：仙女山度假区" },
	// { name: "雪境山趣", time: "(2023年7月)", desc: "徒步大会", addr: "地点：仙女山度假区" },
	// { name: "雪境山趣", time: "(2023年9月)", desc: "国际户外运动公开赛", addr: "地点：仙女山街道" },
	// { name: "雪境山趣", time: "(2023年8月)", desc: "露天音乐会", addr: "地点：仙女山街道龙宝塘欢乐谷" }
];
</script>
<style lang="scss" scoped>
.footer {
	width: 100%;
	text-align: right;
}
.hu-wai {
	padding: 0 320px;
	padding-bottom: 60px;
	.title {
		padding: 40px 0 20px;
		font-size: 24px;
		font-weight: 700;
		text-align: center;
	}
	.preview-box {
		display: flex;
		flex-wrap: wrap;
		align-content: start;
		justify-content: space-between;
		min-height: 609px;
		.preview-item {
			box-sizing: border-box;
			display: flex;
			width: 620px;
			height: 120px;
			margin-bottom: 20px;
			border: 1px solid #8a1313;
			.topic {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 120px;
				height: 100%;
				color: #ffffff;
				background-color: #8a1313;
				p {
					padding: 0;
					margin: 0;
					&.topic-name {
						padding-bottom: 10px;
						font-size: 20px;
					}
					&.topic-time {
						font-size: 16px;
					}
				}
			}
			.content {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
				padding: 20px;
				p {
					padding: 0;
					margin: 0;
					font-size: 16px;
					&:last-child {
						color: #c39f63;
					}
				}
			}
		}
	}
	.box-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.box {
			width: 413px;
			padding-bottom: 20px;
			margin-bottom: 40px;
			font-size: 16px;
			font-weight: bold;
			color: rgb(25 25 25 / 100%);
			border-bottom: 1px solid #dedede;
			.cover {
				width: 100%;
				height: 275px;
				margin-bottom: 20px;
			}
		}
	}
}

@media all and (max-width: 750px) {
	.hu-wai {
		padding: 16px;
		.title {
			padding-top: 16px;
		}
		.box-list {
			.box {
				width: 47.5%;
				margin-right: 5%;
				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}
}
</style>
